Adwaita: message dialog, destructive and suggested action buttons.
authorLapo Calamandrei <calamandrei@gmail.com>
Sat, 5 Jul 2014 16:18:44 +0000 (18:18 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Sat, 5 Jul 2014 16:18:44 +0000 (18:18 +0200)
...and generic linked destructive and suggested action button fix.

gtk/resources/theme/Adwaita/_common.scss
gtk/resources/theme/Adwaita/_drawing.scss
gtk/resources/theme/Adwaita/gtk-contained-dark.css
gtk/resources/theme/Adwaita/gtk-contained.css

index 08cef54c412f93b67e81461855b66af2be1b058d..5309a1d6c06f5f73ed83aa74f8e360e2f70d3a27 100644 (file)
@@ -334,7 +334,10 @@ GtkLabel {
 //    -GtkWidget-wide-separators: true;
 //    -GtkWidget-horizontal-separator: 0;
 //   }
-  .linked &, .linked &:backdrop {
+  .linked &,
+  .linked &:hover,
+  .linked &:active,
+  .linked &:backdrop {
     @extend %linked_buttons;
   }
 }
@@ -1858,6 +1861,33 @@ GtkCalendar {
         @include button(backdrop-insensitive, $noedge: true);
         @extend %middle_button;
       }
+      @each $b_type, $b_color in (suggested-action, $selected_bg_color),
+                                 (destructive-action, $destructive_color) {
+        &.#{$b_type} {
+          @include button(normal, $b_color, white, $noedge: true);
+          @extend %middle_button;
+          &:hover {
+            @include button(hover, $b_color, white, $noedge: true);
+            @extend %middle_button;
+          }
+          &:active {
+            @include button(active, $b_color, white, $noedge: true);
+            @extend %middle_button;
+          }
+          &:backdrop {
+            @include button(backdrop, $b_color, white);
+            @extend %middle_button;
+            &:insensitive {
+              @include button(backdrop-insensitive);
+              @extend %middle_button;
+            }
+          }
+          &:insensitive {
+            @include button(insensitive);
+            @extend %middle_button;
+          }
+        }
+      }
       &:first-child{ @extend %first_button; }
       &:last-child { @extend %last_button; }
     }
index f51b47fc765e09fee598a99b258504f5158685bc..6fd58ac265c3a47fae6888b63bea660bee9ca642 100644 (file)
@@ -46,7 +46,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     @if $variant == 'light' {
       border-color: $fc;
       @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%),
-                      inset 0 0 2px 1px mix($fc,$base_color,20%),
+                        inset 0 0 2px 1px mix($fc,$base_color,20%),
                         $_entry_edge);
     }
     @else {
index 193d5b7e149deade8608156147e07173668e3716..8f46554c92145a9cb1b01ca938c6514592b62944 100644 (file)
   border-radius: 3px;
   border-style: solid; }
 
-.osd .button, .osd .button:hover, .osd .button:active, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:backdrop {
+.osd .button, .osd .button:hover, .osd .button:active, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:backdrop {
   border-radius: 0;
   border-left-style: none; }
   .osd .button:dir(rtl), .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl) {
@@ -2451,7 +2451,111 @@ GtkCalendar {
       border-color: #1e2222;
       background-image: linear-gradient(to bottom, #393f3f);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-  .message-dialog.csd .dialog-action-area .button, .message-dialog.csd .dialog-action-area .button:hover, .message-dialog.csd .dialog-action-area .button:active, .message-dialog.csd .dialog-action-area .button:insensitive, .message-dialog.csd .dialog-action-area .button:backdrop, .message-dialog.csd .dialog-action-area .button:backdrop:insensitive {
+    .message-dialog.csd .dialog-action-area .button.suggested-action {
+      border-width: 1px;
+      border-style: solid;
+      color: white;
+      background-image: linear-gradient(to bottom, #256ab1, #215d9c 40%, #1c5187);
+      border-color: #0b1e33;
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.70353);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+      .message-dialog.csd .dialog-action-area .button.suggested-action:hover {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #0b1e33;
+        background-image: linear-gradient(to bottom, #3180d4, #2467ad 40%, #215d9c);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.67153);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.67153);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+      .message-dialog.csd .dialog-action-area .button.suggested-action:active {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #0b1e33;
+        background-image: linear-gradient(to bottom, #184472, #1c5187 3%);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.78353);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.78353);
+        box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
+      .message-dialog.csd .dialog-action-area .button.suggested-action:backdrop {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #215d9c;
+        background-image: linear-gradient(to bottom, #215d9c);
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+        .message-dialog.csd .dialog-action-area .button.suggested-action:backdrop:insensitive {
+          border-width: 1px;
+          border-style: solid;
+          color: #454c4c;
+          border-color: #1e2222;
+          background-image: linear-gradient(to bottom, #393f3f);
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: #939695;
+        border-color: #1c1f1f;
+        background-image: linear-gradient(to bottom, #323636);
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
+    .message-dialog.csd .dialog-action-area .button.destructive-action {
+      border-width: 1px;
+      border-style: solid;
+      color: white;
+      background-image: linear-gradient(to bottom, #ed1212, #d51010 40%, #bd0e0e);
+      border-color: #5e0707;
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+      .message-dialog.csd .dialog-action-area .button.destructive-action:hover {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #5e0707;
+        background-image: linear-gradient(to bottom, #f03c3c, #e81111 40%, #d51010);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.60878);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.60878);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+      .message-dialog.csd .dialog-action-area .button.destructive-action:active {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #5e0707;
+        background-image: linear-gradient(to bottom, #a60c0c, #bd0e0e 3%);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.72078);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.72078);
+        box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
+      .message-dialog.csd .dialog-action-area .button.destructive-action:backdrop {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #d51010;
+        background-image: linear-gradient(to bottom, #d51010);
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+        .message-dialog.csd .dialog-action-area .button.destructive-action:backdrop:insensitive {
+          border-width: 1px;
+          border-style: solid;
+          color: #454c4c;
+          border-color: #1e2222;
+          background-image: linear-gradient(to bottom, #393f3f);
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: #939695;
+        border-color: #1c1f1f;
+        background-image: linear-gradient(to bottom, #323636);
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
+  .message-dialog.csd .dialog-action-area .button, .message-dialog.csd .dialog-action-area .button:hover, .message-dialog.csd .dialog-action-area .button:active, .message-dialog.csd .dialog-action-area .button:insensitive, .message-dialog.csd .dialog-action-area .button:backdrop, .message-dialog.csd .dialog-action-area .button:backdrop:insensitive, .message-dialog.csd .dialog-action-area .button.suggested-action, .message-dialog.csd .dialog-action-area .button.suggested-action:hover, .message-dialog.csd .dialog-action-area .button.suggested-action:active, .message-dialog.csd .dialog-action-area .button.suggested-action:backdrop, .message-dialog.csd .dialog-action-area .button.suggested-action:backdrop:insensitive, .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive, .message-dialog.csd .dialog-action-area .button.destructive-action, .message-dialog.csd .dialog-action-area .button.destructive-action:hover, .message-dialog.csd .dialog-action-area .button.destructive-action:active, .message-dialog.csd .dialog-action-area .button.destructive-action:backdrop, .message-dialog.csd .dialog-action-area .button.destructive-action:backdrop:insensitive, .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive {
     border-right-style: none;
     border-bottom-style: none; }
   .message-dialog.csd .dialog-action-area .button:last-child {
index b5d9c67f33de96ef359a6071c01c891ae8561c86..36e2c0485a136a3be1f27af6a5105a7b0905e9cd 100644 (file)
   border-radius: 3px;
   border-style: solid; }
 
-.osd .button, .osd .button:hover, .osd .button:active, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:backdrop {
+.osd .button, .osd .button:hover, .osd .button:active, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:backdrop {
   border-radius: 0;
   border-left-style: none; }
   .osd .button:dir(rtl), .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl) {
@@ -2443,7 +2443,111 @@ GtkCalendar {
       border-color: #a8a8a8;
       background-image: linear-gradient(to bottom, #ededed);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-  .message-dialog.csd .dialog-action-area .button, .message-dialog.csd .dialog-action-area .button:hover, .message-dialog.csd .dialog-action-area .button:active, .message-dialog.csd .dialog-action-area .button:insensitive, .message-dialog.csd .dialog-action-area .button:backdrop, .message-dialog.csd .dialog-action-area .button:backdrop:insensitive {
+    .message-dialog.csd .dialog-action-area .button.suggested-action {
+      border-width: 1px;
+      border-style: solid;
+      color: white;
+      background-image: linear-gradient(to bottom, #5f9ddd, #4a90d9 40%, #3583d5);
+      border-color: #1c5187;
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+      .message-dialog.csd .dialog-action-area .button.suggested-action:hover {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #1c5187;
+        background-image: linear-gradient(to bottom, #85b4e5, #5b9add 40%, #4a90d9);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+      .message-dialog.csd .dialog-action-area .button.suggested-action:active {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #1c5187;
+        background-image: linear-gradient(to bottom, #256ab1, #2974c2 3%, #2a76c6);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
+        box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
+      .message-dialog.csd .dialog-action-area .button.suggested-action:backdrop {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #4a90d9;
+        background-image: linear-gradient(to bottom, #4a90d9);
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+        .message-dialog.csd .dialog-action-area .button.suggested-action:backdrop:insensitive {
+          border-width: 1px;
+          border-style: solid;
+          color: #c7c7c7;
+          border-color: #a8a8a8;
+          background-image: linear-gradient(to bottom, #ededed);
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: #8d9091;
+        border-color: #a1a1a1;
+        background-image: linear-gradient(to bottom, #f4f4f4);
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
+    .message-dialog.csd .dialog-action-area .button.destructive-action {
+      border-width: 1px;
+      border-style: solid;
+      color: white;
+      background-image: linear-gradient(to bottom, #f14141, #ef2929 40%, #ed1212);
+      border-color: #8e0b0b;
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.56078);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.56078);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+      .message-dialog.csd .dialog-action-area .button.destructive-action:hover {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #8e0b0b;
+        background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.52878);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.52878);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+      .message-dialog.csd .dialog-action-area .button.destructive-action:active {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #8e0b0b;
+        background-image: linear-gradient(to bottom, #bd0e0e, #d01010 3%, #d51010);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
+        icon-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
+        box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
+      .message-dialog.csd .dialog-action-area .button.destructive-action:backdrop {
+        border-width: 1px;
+        border-style: solid;
+        color: white;
+        border-color: #ef2929;
+        background-image: linear-gradient(to bottom, #ef2929);
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+        .message-dialog.csd .dialog-action-area .button.destructive-action:backdrop:insensitive {
+          border-width: 1px;
+          border-style: solid;
+          color: #c7c7c7;
+          border-color: #a8a8a8;
+          background-image: linear-gradient(to bottom, #ededed);
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+      .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive {
+        border-width: 1px;
+        border-style: solid;
+        color: #8d9091;
+        border-color: #a1a1a1;
+        background-image: linear-gradient(to bottom, #f4f4f4);
+        text-shadow: none;
+        icon-shadow: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
+  .message-dialog.csd .dialog-action-area .button, .message-dialog.csd .dialog-action-area .button:hover, .message-dialog.csd .dialog-action-area .button:active, .message-dialog.csd .dialog-action-area .button:insensitive, .message-dialog.csd .dialog-action-area .button:backdrop, .message-dialog.csd .dialog-action-area .button:backdrop:insensitive, .message-dialog.csd .dialog-action-area .button.suggested-action, .message-dialog.csd .dialog-action-area .button.suggested-action:hover, .message-dialog.csd .dialog-action-area .button.suggested-action:active, .message-dialog.csd .dialog-action-area .button.suggested-action:backdrop, .message-dialog.csd .dialog-action-area .button.suggested-action:backdrop:insensitive, .message-dialog.csd .dialog-action-area .button.suggested-action:insensitive, .message-dialog.csd .dialog-action-area .button.destructive-action, .message-dialog.csd .dialog-action-area .button.destructive-action:hover, .message-dialog.csd .dialog-action-area .button.destructive-action:active, .message-dialog.csd .dialog-action-area .button.destructive-action:backdrop, .message-dialog.csd .dialog-action-area .button.destructive-action:backdrop:insensitive, .message-dialog.csd .dialog-action-area .button.destructive-action:insensitive {
     border-right-style: none;
     border-bottom-style: none; }
   .message-dialog.csd .dialog-action-area .button:last-child {